<template>
  <div class="orders-container">
    <el-row :gutter="20">
      <el-col :span="24" v-for="order in orders" :key="order.orderId">
        <el-card>
          <div class="order-header">
            <h3>订单号：{{ order.orderId }}</h3>
            <el-tag :type="getTagType()">已完成</el-tag>
          </div>
          <div class="order-body">
            <div
              v-for="item in order.itemList"
              :key="item.id"
              class="order-item"
            >
              <div>{{ item.name }}</div>
              <div>数量：{{ item.count }}</div>
              <div>单价：{{ item.price }}</div>
            </div>
          </div>
          <div class="order-footer">
            <span>下单金额：{{ order.totalPrice }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as orderapi from "@/api/order";
import { useStore } from "vuex";
const store = useStore();
const getList = async () => {
  const { data } = await orderapi.getAllList();
  orders.value = data.filter((i) => {
    return i.userId === store.state.userInfo.userId;
  });
};
getList();
const orders = ref([
  // 更多订单...
]);

const getTagType = (status) => {
  return "success";
};
</script>

<script>
// 定义一个全局的货币过滤器
</script>
<style scoped>
.orders-container {
  max-width: 800px;
  margin: 20px auto;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}

.order-footer {
  text-align: right;
  margin-top: 15px;
}
</style>